<template>
  	<div>
  		<canvas  id="chart" style="width:100%;height:308px;background-color:#fff">
        </canvas>
  	</div>
</template>
<script>

  let config = {
        type: 'line',
        data:{
            labels: [],
            datasets: []
        },
        options: {
            responsive: false,
            title:{
                display:false
            },
            tooltips: {
                display:false,
                mode: 'label'
            },
            legend: {
                display:false
            },
            hover: {
                mode: 'label'
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        show: true,
                        labelString: 'Hour'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        show: true,
                        labelString: 'Value'
                    },
                    ticks: {
                        suggestedMin: 0,
                        suggestedMax: 10000
                    }
                }]
            }
        }

    };

  export default {
    name:'trade-vue',
    data(){
      return {}
    },
    methods:{
    	init(){
    		let labels = new Array(24).fill(24);
    		let datasets = [];
    		let cfg = $.extend( true,{},config );
    		let ctx = this.chart;

    		labels.forEach( (v,i,a)=>{
    			a[i] = i + '-' + ( i + 1 ) + 'h';
    		} )

    		datasets.push( {
    			fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				pointColor : "rgba(220,220,220,1)",
				pointStrokeColor : "#fff",
				data : new Array(24).fill(20)
    		} )
    		datasets[0].data.forEach( (v,i,a)=>{
    			a[i] = Math.random() * 10000
    		} )

    		cfg.data.labels = labels;
    		cfg.data.datasets =datasets;
            this.myChart = new Chart(ctx,cfg);

    	}
    },
    mounted(){
    	this.chart = $('#chart');
    	this.init();
    }
  }
</script>
<style scoped lang="less">
  
</style>